<template>
  <div class="stock-flow">
    <d2-container type="card" betterScroll class="aside-container">
      <el-form
        class="query-form"
        :label-position="'top'"
        label-width="80px"
        :model="queryForm"
        ref="queryForm"
        :rules="queryRules"
        @submit.native.prevent="handleSubmitQuery"
      >
        <el-form-item>
          <el-button type="ghost" size="small" @click="handleResetQuery"
            >重置</el-button
          >
          <el-button
            native-type="submit"
            size="small"
            type="primary"
            icon="el-icon-search"
            :loading="loading"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item label="sku" prop="sku">
          <el-input
            placeholder="请输入sku搜索"
            v-model="queryForm.sku"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库车位" prop="storeCode">
          <el-input
            placeholder="请输入仓库车位搜索"
            v-model="queryForm.storeCode"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="skuName">
          <el-input
            placeholder="请输入商品名称搜索"
            v-model="queryForm.skuName"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="关联单据号" prop="billNo">
          <el-input
            placeholder="请输入关联单据号搜索"
            v-model="queryForm.billNo"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTimeStart">
          <el-date-picker
            size="small"
            style="width: 198px"
            v-model="queryForm.createTimeStart"
            align="right"
            placeholder="开始日期"
            :picker-options="pickerOptions"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="createTimeEnd">
          <el-date-picker
            size="small"
            style="width: 198px"
            v-model="queryForm.createTimeEnd"
            align="right"
            placeholder="结束日期"
            :picker-options="pickerOptions"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </d2-container>
    <d2-container class="main-container">
      <template slot="header"> 库存记录 </template>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        border
        size="small"
        style="width: 100%"
      >
        <el-table-column
          header-align="center"
          prop="id"
          width="60"
          label="流水ID"
        >
        </el-table-column>
        <el-table-column header-align="center" prop="sku" label="sku">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="storeCode"
          label="仓库车位"
        >
        </el-table-column>
        <el-table-column header-align="center" prop="skuName" label="商品名称">
        </el-table-column>
        <el-table-column header-align="center" prop="skuNum" label="库存数量">
        </el-table-column>
        <el-table-column header-align="center" prop="unit" label="单位">
        </el-table-column>
        <el-table-column header-align="center" prop="flow" label="库存流向">
          <div slot-scope="{ row }">
            {{ row.flow == 1 ? '入库' : '出库' }}
          </div>
        </el-table-column>
        <el-table-column header-align="center" prop="billNo" label="关联单据">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="queryForm.pageNum"
        :page-size="queryForm.pageSize"
        :total="total"
        background
        layout="total, prev, pager, next"
      >
      </el-pagination>
    </d2-container>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'stock-flow',
  data() {
    return {
      loading: false,
      total: 0,
      queryForm: {
        billNo: '',
        createTimeEnd: '',
        createTimeStart: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10,
        sku: '',
        skuName: '',
        storeCode: '',
        queryDate: '',
      },
      pickerOptions: {
        // shortcuts: [
        //   {
        //     text: '最近一周',
        //     onClick(picker) {
        //       const end = new Date()
        //       const start = new Date()
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        //       picker.$emit('pick', [start, end])
        //     },
        //   },
        //   {
        //     text: '最近一个月',
        //     onClick(picker) {
        //       const end = new Date()
        //       const start = new Date()
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        //       picker.$emit('pick', [start, end])
        //     },
        //   },
        //   {
        //     text: '最近三个月',
        //     onClick(picker) {
        //       const end = new Date()
        //       const start = new Date()
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        //       picker.$emit('pick', [start, end])
        //     },
        //   },
        // ],
      },
      tableData: [],
      queryRules: {
        billNo: [
          {
            required: false,
            trigger: 'blur',
          },
        ],
        sku: [
          {
            required: false,
            trigger: 'blur',
          },
        ],
        storeCode: [
          {
            required: false,
            trigger: 'blur',
          },
        ],
        skuName: [
          {
            required: false,
            trigger: 'blur',
          },
        ],
        queryDate: [
          {
            required: false,
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.fetchStockFlowList()
  },
  methods: {
    handleSubmitQuery() {
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          this.fetchStockFlowList()
        } else {
          return false
        }
      })
    },
    handleResetQuery() {
      this.$refs['queryForm'].resetFields()
    },
    fetchStockFlowList() {
      this.loading = true
      const query = Object.assign({}, this.queryForm, {})
      api
        .STOCK_FLOW_LIST(query)
        .then((response) => {
          this.loading = false
          this.tableData = response.list
          this.total = response.totalCount
          this.queryForm.pageNum = response.currPage
          this.queryForm.pageSize = response.pageSize
        })
        .catch(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss">
.stock-flow {
  height: 100%;
}
.aside-container {
  .query-form {
    .el-form-item__content {
      text-align: center;
    }
  }
}
</style>
